<script lang="ts" setup>
  import { onMounted, ref } from "vue";

  const visible = ref(false);

  const clickOutsideHandler = (e: any) => {
    if (!e.target.closest(".umrp-datepicker")) {
      visible.value = false;
    }
  };

  onMounted(() => {
    document.addEventListener("click", clickOutsideHandler);
  });
</script>

<template>
  <div class="umrp-datepicker">
    <div class="input">
      <input type="text" @focus="visible = true" placeholder="请选择日期" />
    </div>
    <div class="panel" v-if="visible">
      <div class="left">
        <div class="week-list">
          <div class="week-list-item">日</div>
          <div class="week-list-item">一</div>
          <div class="week-list-item">二</div>
          <div class="week-list-item">三</div>
          <div class="week-list-item">四</div>
          <div class="week-list-item">五</div>
          <div class="week-list-item">六</div>
        </div>
        <div class="week-row">
          <div class="week-cell">29</div>
          <div class="week-cell">30</div>
          <div class="week-cell">1</div>
          <div class="week-cell">2</div>
          <div class="week-cell">3</div>
          <div class="week-cell">4</div>
          <div class="week-cell">5</div>
        </div>
        <div class="week-row">
          <div class="week-cell" v-for="i in 7">{{ i + 5 }}</div>
        </div>
        <div class="week-row">
          <div class="week-cell" v-for="i in 7">{{ i + 12 }}</div>
        </div>
        <div class="week-row">
          <div class="week-cell" v-for="i in 7">{{ i + 19 }}</div>
        </div>
      </div>
      <div class="right">
        <div class="hour">
          <div v-for="i in 24">{{ (i - 1).toString().padStart(2, "0") }}</div>
        </div>
        <div class="minute">
          <div v-for="i in 60">{{ (i - 1).toString().padStart(2, "0") }}</div>
        </div>
        <div class="second">
          <div v-for="i in 60">{{ (i - 1).toString().padStart(2, "0") }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @use "../global";

  .umrp-datepicker {
    position: relative;
    display: flex;
    line-height: 32px;
    color: #333;
    font-size: 14px;

    .panel {
      display: flex;
      position: absolute;
      border-radius: 4px;
      top: 38px;
      left: 0px;
      background-color: #fff;
      border: 1px solid var(--border-color);
      height: 200px;

      .left {
        padding: 16px;
        border-right: 1px solid var(--border-color);
      }

      .right {
        padding: 10px;
        display: flex;

        .hour,
        .minute,
        .second {
          cursor: pointer;
          width: 32px;
          height: 32px;
          height: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          > div {
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .week {
      &-list {
        display: flex;
        &-item {
          color: #7d7d7f;
        }
      }

      &-row {
        display: flex;
      }

      &-cell,
      &-list-item {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
      }
    }
  }
</style>
